<!-- 购物车 -->
<template>
	<view>
		<!-- 无商品时 -->
		<view class="no-shopping" v-if="!hasShop">
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" text="购物车空空如也，逛一逛">
			</u-empty>
		</view>
		<view class="shopping" v-if="hasShop">
			<ul>
				<li v-for="(item,index) in shopCart" :key='index'>
					<view class="item">
						<view class="img-info">
							<figure>
								<image src="../../static/imgs/coffee.jpg" mode="scaleToFill"></image>
							</figure>
						</view>
						<view class="item-info">
							<text class="text-strong">{{item.name}}</text>
							<text class="text-grey">总共{{item.number}}个</text>
							<text class="text-orange-strong">￥{{item.amount}}</text>
						</view>
					</view>
				</li>
			</ul>
		</view>
		<view class="buy-btn" v-if="hasShop">
			<!-- 删除按钮 -->
			<view class="del-btn" @click="delShopCart">
				<text>清空购物车</text>
			</view>
			<view class="buy" @click="goBuy">
				<text>立即结算</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasShop: false,
				shopCart: [],
			}
		},
		methods: {
			getShopCart() {
				this.$ajax.getShopCartList.get().then(res => {
					if (res.data.length != 0) {
						this.hasShop = true;
						this.shopCart = res.data
					} else {
						this.hasShop = false;
					}

				})
			},

			goBuy() {
				uni.navigateTo({
					url: "/pages/shop/buyShop/buyShop?info=" + encodeURIComponent(JSON.stringify(this
						.shopCart))
				})
			},

			// 清空购物车
			delShopCart() {
				this.$ajax.removeShopCart.delete().then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '删除成功！',
							icon: 'success'
						})
						this.getShopCart();
					}else{
						uni.showToast({
							title: '删除失败！',
							icon: 'error'
						})
						this.getShopCart();
					}
				})
			}
		},
		mounted() {
			this.getShopCart()
		},

	}
</script>

<style lang="scss" scoped>
	.shopping {
		padding: 20rpx 20rpx 0 20rpx;

		.item {
			display: flex;
			margin: 0 0 10rpx 0;
			border-bottom: 2px dashed #aaa;
			background-color: #f7f8fa;

			.img-info {
				margin-right: 10rpx;

				image {
					width: 166rpx;
					height: 166rpx;
				}
			}

			.item-info {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: flex-start;

				.text-strong {
					font-weight: 650;
				}

				.text-grey {
					color: #aaa;
				}

				.text-orange-strong {
					font-weight: 600;
					color: #ee651b;
				}
			}
		}
	}

	.buy-btn {
		position: fixed;
		bottom: 55px;
		right: 0;
		background-color: #fff;
		width: 450rpx;
		height: 100rpx;
		z-index: 1000;
		padding: 20rpx 10rpx 10rpx 10rpx;
		overflow: hidden;
		display: flex;

		.buy {
			line-height: 100rpx;
			width: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			margin-right: 20rpx;
			color: #fff;
			background-color: #6d86c4;
			border-radius: 10rpx;
			margin-right: 50rpx;
		}

		.del-btn {
			line-height: 100rpx;
			width: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			margin-right: 20rpx;
			color: #fff;
			background-color: #f56c6c;
			border-radius: 10rpx;
		}
	}
</style>
